import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { CoverWrapper } from './style'
import { getImageSize } from '@/utils/HandlerImg'
import { message } from 'antd'
interface IProps {
  children?: ReactNode
  data: any
}

const DjRadioCover: React.FC<IProps> = (props) => {
  const [messageApi, contextHolder] = message.useMessage()
  const { data } = props
  return (
    <CoverWrapper>
      {contextHolder}
      <a
        onClick={() => {
          messageApi.open({
            type: 'success',
            content: `当前选择的id: ${data.name}`
          })
        }}
      >
        <img src={getImageSize(data.picUrl, 150)} alt="" />
      </a>
      <a
        onClick={() => {
          messageApi.open({
            type: 'success',
            content: `当前选择的是: ${data.name}`
          })
        }}
        className="text-nowrap name"
      >
        {data.name}
      </a>
      <p className="text-nowrap">{data.desc}</p>
    </CoverWrapper>
  )
}

export default memo(DjRadioCover)
